<template>
  <view class="container">
    <view class="main-title">快捷登录注册</view>
    <view class="small-title" v-if="showtitle">请输入手机号</view>
    <view class="tel">
      <input
        class="uni-input"
        :class="{ 'more-style': historyInfo }"
        :placeholder="placeholder"
        type="text"
        :value="UserName"
        :maxlength="maxphone"
        placeholder-style="font-size:40rpx;font-weight:bold;color:#666"
        @input="onInput"
        @focus="showSmalltitle"
        @blur="hideSmalltitle"
      />
      <view class="dele-icon" v-show="showClearIcon" @click="clearIcon">
        <i-icon
          icon="iconquxiaoxunjia"
          type="single"
          size="34rpx"
          color="#e1e1e1"
        ></i-icon>
      </view>
      <view class="front-icon" v-show="phoneList.length">
        <u-icon
          :class="{ 'arrow-up': isFocus, 'arrow-down': !isFocus }"
          name="arrow-down-fill"
          size="22rpx"
        ></u-icon>
      </view>
      <view class="history-list" v-show="isFocus && phoneList.length && phoneLength">
        <view
          v-for="(item, index) in phoneList"
          :key="index"
          class="history-item"
          ><view @touchstart="selHistory(item)"  style="display: inline-block;"> {{ item }}</view> </view
        >
      </view>
    </view>
    <view class="tips">未注册手机号，系统将自动创建账号</view>
    <view class="read-agree flex flex-ai-c">
      <view class="icon-box flex flex-ai-c" @click="Agree">
        <!-- 未选择 -->
        <i-icon
          v-if="isAgree"
          icon="iconxuanzhong"
          type="single"
          size="30rpx"
          color="#e1e1e1"
        ></i-icon>
        <!-- 勾选 -->
        <i-icon
          v-else
          icon="iconxuanzhong"
          type="single"
          size="30rpx"
          color="#FBBC00"
        ></i-icon>
      </view>
      <text class="main">
        我已阅读并同意
        <text class="yellow" @click="gouserAgreementPage(0)"
          >《用户使用协议》</text
        >
        和
        <text class="yellow" @click="gouserAgreementPage(1)">《隐私政策》</text>
      </text>
    </view>
    <!-- 获取验证码 -->
    <view>
      <button
        :class="isDisabled ? 'btn-disable' : 'btn-primary'"
        @click="$u.throttle(getCode, 1000)"
      >
        {{ btnText }}
      </button>
    </view>
    <view class="passwordLogin" @click="$u.throttle(passwordLogin, 1000)"
      >密码登录</view
    >

    <!-- 免责弹窗 -->
    <view class="uni-popup" v-if="showPopup">
      <view class="main">
        <user-agreement-popup></user-agreement-popup>
        <view class="popup-footer">
          <button class="disagreeBtn" @tap="agreepopup(1)">不同意</button>
          <button class="agreeBtn" @tap="agreepopup(0)">同意</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script src="./login.js"></script>

<style lang="scss" scoped>
@import './login.scss';
</style>
